<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<div id="banner">
	<!--图片区-->
	<div class="pic">
		<img src="images/1.png" style="display:block"/>
		<img src="images/2.png"/>
		<img src="images/3.png"/>
		<img src="images/4.png"/>
		<img src="images/5.png"/>
		<img src="images/6.png"/>
	</div>
	<!--按钮区-->
	<div class="btn">
		<ul>
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div> 
</div>

<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
//siblings是除了当前的，对其他的属性进行设置
//eq(index)获得当前索引值
	$(function(){
		var index=0;
		$('.btn ul li').hover(function(){
			var index=$(this).index();//定义序列号，也是索引值
			$(this).addClass('on').siblings().removeClass('on');
			//$('.pic img').eq(index).show().siblings().hide();速度太快将show换成淡入淡出的fadeIn
			//$('.pic img').eq(index).fadeIn().siblings().hide();鼠标移动太快，图片会跟不上
			$('.pic img').eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
		}/*鼠标移入时的效果*/,function(){}/*鼠标移出时的*/);
		/*setInterval(function(){//定时器
			index++;
			//if(index>5)index=0;循环太慢
			index%=6;//index取膜，比如当index=7时，7的膜就是1
			$('.btn ul li').eq(index).addClass('on').siblings().removeClass('on');
			$('.pic img').eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
			
		},2000)*/
	var play=setInterval(auto,2000);	
	$('#banner').hover(function(){
		clearInterval(play);//当鼠标移动到banner上的时候停下来
	},function(){
		play=setInterval(auto,2000);
	});
	function auto(){
		index++;
		index%=6;
		$('.btn ul li').eq(index).addClass('on').siblings().removeClass('on');
			$('.pic img').eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
	}
	});
</script></body>
</html>
